{# 继承基础模版 #}
{% extends 'demo/base.html' %}
{% load common_extras %}
{# 重写标题 #}
{% block title %}
    {# 首字母转大写  过滤器的作用：对变量值进行处理转换，处理之后再替换原来的值 #}
    {{ now_cls | capfirst  }}博客-IT专业技术发表平台
{% endblock %}
{# 重写头部 #}
{% block header %}
    {% include 'demo/header.html' %}
{% endblock %}
{# 重写主体 #}
{% block main %}
    {% if articles %}
        {% include 'demo/classes.html' %}
            <ul class="nav">
            {% for article in articles %}
                {# 循环的第一次迭代 数据中的第一篇文章 #}
                {% if forloop.first %}
                    <div class="bottom-info"><h1>{{ now_cls | capfirst }}博客-IT专业技术发表平台~开始的第一篇文章~</h1></div>
                {% endif %}
            <li class="nav-item">
            {# article.id 跳转到ID值的文章数据 #}
            {% comment %} 如果路由定义了转换器或者其他的参数 那么就不能使用URL模版标签的命名路由跳转到其它页面 {% endcomment %}
                <a href="/demo/article/{{ article.id }}">
                    <div class="left">
                        <h4>{{ forloop.counter }}、{{ article.title }}</h4>
                        <p>{{ article.desc }}</p>
                        {# 日期过滤器 #}
                        <p class="time-info">发布时间：{{ article.create_time | time_since }}</p>
                    </div>
                    <div class="right">
                        <img src="/static/media/{{ article.cover }}/"  alt="">
                    </div>
                </a>
            </li>
                {# 循环的最后一次迭代 数据中的最后一篇文章 #}
                {% if forloop.last %}
                    <div class="bottom-info">已经是最后一篇文章了~ 已经到底了 ~</div>
                {% endif %}
            {% endfor %}
        </ul>
    {# 空值 数据中没有文章 #}
    {% else %}
        {# | capfirst 首字母大写 | cut:' ' 取消空格 #}
        <div class="bottom-info"><h1>{{ now_cls | capfirst | cut:' ' }}博客-IT专业技术发表平台~暂无数据~</h1></div>
    {% endif %}
{% endblock %}

